﻿<%@ Page Language="c#" ContentType="text/html" ResponseEncoding="utf-8" Async="true" MasterPageFile="~/administration/list_private.master" Inherits="ACM.cmsarea08.Administration.Core.gesUmodel" %>
<%@ MasterType VirtualPath="~/administration/list_private.master" %>
<asp:Content ID="PageBody" Runat="server" ContentPlaceHolderID="MasterBody">
<div class="dynform dfbody dfmainbody">
<h1><img src="../template/admimg/user_model_big.jpg" alt="User Forms Manager" />Gestione Modelli Utente</h1>
<div id="tools">
    <ul id="showtool">
      <li id="showGes">Gestione modelli Assegnati</li>
      <li id="showPro">Inserisci Nuovo modello</li>
      <li id="showView">Visualizza/Elimina modelli</li>      
    </ul>
  </div>
<!-- modello per la gestione -->
<div id="gesModel"><a name="gesM"></a>
    <h3>gestione dei Modelli Assegnati</h3>
    <span> Per assegnare dei modelli è necessario trascinare il modello desiderato dalla parte destra verso quella sinistra<br />
    <b>Attenzione:</b><em>Non è possibile assegnare più di un modello per tipologia o per tipologia/lingua; inoltre non è possibile assegnare <br />
    i modelli di tipo &quot;Profilo&quot; al Folder Registrazione e viceversa.</em><br />
    <b>Al Termine delle operazioni cliccare su &quot;Salva Modifiche&quot; per confermare tutte le impostazioni</b> </span>
    <div class="assegnazioni">
      <div id="posizionicc">
        <h4>Assegnazioni</h4>
        <ul id="posizioni" runat="server">
          <li class="folder">Profilo
            <ul id='pro' class='dropme list'>
              <li class="empty item">vuoto</li>
            </ul>
          </li>
          <li class="folder">Registrazione
            <ul id='reg' class='dropme list'>
              <li class="empty item">vuoto</li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
    <div class="cvalori">
      <h4>Modelli Disponibili</h4>
      <ul id="valori" runat="server">
        <li class="folder">Profili
          <ul id='pro'>
            <li class="drag_profile item"><a href="#" title="pro,id,lang" class="drag">elemento 1</a></li>
            <li class="drag_profile item"><a href="#" title="pro,id1,lang2" class="drag">elemento 2</a></li>
          </ul>
        </li>
        <li class="folder">Registrazioni
          <ul id="reg">
            <li class="drag_profile item"><a href="#" title="reg,id,lang" class="drag">elemento 3</a></li>
          </ul>
        </li>
      </ul>
    </div>
    <br class="clearbr"/>
    <asp:Button id="btm_upd" runat="server" Text="Conferma modifiche" CssClass="btm_confirm"></asp:Button>
    <div style="clear:both; display:none;">Assegnazioni: <br />
        pro_lista
        <input type="text" id="pro_lista" runat="server" /><br />
        reg_lista
        <input type="text" id="reg_lista" runat="server" />
      </div>
</div>  
<!-- modello per l'inserimento -->
<div id="insModel"><a name="insM"></a>
    <h3>Inserisci nuovo Modello</h3>
    parte per l'installazione del nuovo modello <br class="clearbr"/>
    <asp:Label AssociatedControlID="nome_ins" Text="nome:" runat="server"/>
    <asp:TextBox id="nome_ins" runat="server"></asp:TextBox>
    <asp:RequiredFieldValidator Text=" *(required)" Display="Static" runat="server" ControlToValidate="nome_ins" ValidationGroup="newmodello"/>
    <br class="clearbr"/>
    <asp:Label AssociatedControlID="file_ins" Text="File:" runat="server"/>    
    <asp:FileUpload id="file_ins" runat="server" />
    <br class="clearbr"/>
    <asp:Label AssociatedControlID="tipo_ins" Text="Tipo:" runat="server"/>    
    <asp:DropDownList id="tipo_ins" runat="server">
      <asp:ListItem Value="P">Profilo</asp:ListItem>
      <asp:ListItem Value="R">Registrazione</asp:ListItem>
    </asp:DropDownList>
    <br class="clearbr"/>
    <asp:Label AssociatedControlID="lang_ins" Text="Lingua:" runat="server"/>    
    <asp:DropDownList id="lang_ins" runat="server"></asp:DropDownList>
    <br class="clearbr"/>
    <asp:Button id="btm_ins" runat="server" Text="Inserisci" ValidationGroup="newmodello"></asp:Button>
</div>
<!-- modello per il visus -->
<div id="viewModel"><a name="viewM"></a>
    <h3>Visualizza/Elimina modelli Esistenti</h3>
    <span>Elenco dei Modelli Installati e pulsanti</span>
    <table width="90%" border="0" align="center" cellpadding="0" cellspacing="0" class="umodeltable">
	<thead>
    	<tr>
        	<td>&nbsp;</td>
        	<td>Nome del Modello</td>
            <td>Tipo</td>
            <td>Assegnato</td>
            <td>Lingua</td>
         </tr>
    </thead>
    <tbody id="umodelbody">
    <asp:Repeater ID="prof_list" runat="server">
    	<itemtemplate>
		    <tr>
            	<td>
                	<asp:Button id="deleteMe" Text="elimina" oncommand="DeleteProfile"  runat="server"/>
                </td>
            	<td><%# Eval("form_desc") %> <a href="../controls/optusers_view.aspx?vid=<%# Eval("id") %>&keepThis=true&TB_iframe=true&height=300&width=600" title="<%# Eval("form_desc") %>" class="smoothbox" rel="<%# Eval("form_desc") %>" >view it</a></td>
                <td><%# (Eval("tipomod").ToString()=="P"?"Profilo":"Registrazione") %></td>
                <td><img src="/administration/template/img/readonly_<%# (Eval("enabled").ToString()=="1"?"0":"1")%>.gif" alt="<%# Eval("enabled")%>" /></td>
                <td><%# Eval("lang") %></td>
            </tr>    	
    	</itemtemplate>
    </asp:Repeater>
    </tbody>
    </table>
</div>  
</div>
<script language="javascript">
window.addEvent('domready', function() {
	
	var fx =[];
	var fxe = [];	
	/* impostazioni */
	var _contPro = '<%= pro_lista.ClientID %>'; //imposta il contenitore dei profili
	var _contReg = '<%= reg_lista.ClientID %>';	//imposta il contenitore dei form registrazione
	var _srcPro  = '#<%=posizioni.ClientID %> .dropme'; //il sorgente/destinazione profili
	var _srcReg  = '#<%=valori.ClientID %>';            //il sorgente/destinazione elementi
	var _testDiv = '<%=valori.ClientID%>';             //div test per differenziare i drag.drop
	//init controlli e funzioni:
	
	//effetti tabella:
	$$('#umodelbody tr').each( function(item) {
//		var fx = new Fx.Styles(item, {duration:200, wait:false});
		var fx = new Fx.Tween(item); 
		item.addEvent('mouseenter', function(){
//			fx.start({
//				'background-color': '#e2e3e0',
//				color: '#000'
//			});
			fx.start( 'background-color', '#e2e3e0' );
			fx.start( 'color', '#000' );			

		});
	 
		item.addEvent('mouseleave', function(){
//			fx.start({
//				'background-color': '#eeeeee',
//				'color': '#333'
//			});
			fx.start( 'background-color', '#eeeeee' );
			fx.start( 'color', '#333' );			
		});
	
	});
	
	
	//    showtool gesModel insModel
	var showFX = [];	
	var showT = $$('#showtool li');
	var tabbero = [
					{ 'elemento': $('gesModel'), 'stato': true, 'altezza': $('gesModel').offsetHeight,
				     'effetto': new Fx.Tween('gesModel') },
					{ 'elemento':$('insModel'), 'stato': true, 'altezza': $('insModel').offsetHeight, 
	                    'effetto': new Fx.Tween('insModel') },
					{ 'elemento':$('viewModel'), 'stato': true, 'altezza': $('viewModel').offsetHeight, 
	                    'effetto': new Fx.Tween('viewModel') }						
				  ];
/*				  
					{ 'elemento': $('gesModel'), 'stato': true, 'altezza': $('gesModel').offsetHeight,
				     'effetto': new Fx.Styles('gesModel', {duration:300, wait:false}) },
					{ 'elemento':$('insModel'), 'stato': true, 'altezza': $('insModel').offsetHeight, 
	                    'effetto': new Fx.Styles('insModel', {duration:300, wait:false}) },
					{ 'elemento':$('viewModel'), 'stato': true, 'altezza': $('viewModel').offsetHeight, 
	                    'effetto': new Fx.Styles('viewModel', {duration:300, wait:false}) }						
*/				  
	for(var i=0;i<tabbero.length;i++) {
		tabbero[i].stato = false;
//		tabbero[i].effetto.start(
//					{'height', [tabbero[i].altezza, 0],'opacity': [1,0]}			
//					);
		tabbero[i].effetto.start('height', [tabbero[i].altezza, 0] );
		tabbero[i].effetto.start('opacity', [1,0] );		
	}
					
	function Nascondi(chi,numo) {
		if(chi.stato==true) {
			chi.effetto.start('height', [chi.altezza, 0] );
			chi.effetto.start('opacity', [1,0]);
//			chi.effetto.start(
//			{'height': [chi.altezza, 0],'opacity': [1,0]}			
//			);			
		} else {
			for(var i=0;i<tabbero.length;i++) {
				if(tabbero[i].stato==true) {
//					tabbero[i].effetto.start(
//					{'height': [tabbero[i].altezza, 0],'opacity': [1,0]}			
//					);
					tabbero[i].effetto.start('height', [tabbero[i].altezza, 0]);
					tabbero[i].effetto.start('opacity', [1,0]);										
					tabbero[i].stato = false;
				}
			}
			Cookie.write('tabbero', numo, {duration: 1});
			chi.effetto.start('height', [0, chi.altezza]);
			chi.effetto.start('opacity', [0,1]);
//			chi.effetto.start(
//			{'height': [0, chi.altezza],'opacity': [0,1]}			
//			);						
		}
		chi.stato = !chi.stato;
	}
	if(Cookie.read('tabbero')) {
		var numo = parseInt(Cookie.read('tabbero'));
		Nascondi(tabbero[numo],numo);
	} else
		Nascondi(tabbero[0],0);
	
	showT.each( function(mLi) {
		//assegna funzione.
		mLi.addEvent('click', function(e) {
			e = new Event(e).stop();
			if(mLi.getAttribute('id') =='showGes') {
				Nascondi(tabbero[0],0);
			} else if(mLi.getAttribute('id') =='showPro') {
				Nascondi(tabbero[1],1);
			} else {
				Nascondi(tabbero[2],2);
			}
			//alert('test');
		});
	});
	
	function canDrag(dest,tipo) {
		var varie = dest.getElements('ul');
		var posUL = -1;
		//primo check ul di tipo:

		if(varie) {
			for(var p=0;p<varie.length;p++) {
				if(varie[p].getAttribute('id')==tipo) {
					posUL=p;break;
				}
			}
		}		
		
		if(posUL==-1) 
			varie = dest.getElements('li');
		else
			varie = varie[posUL].getElements('li');
			
		if(varie) {
			if(varie.length==1) {
				if(  varie[0].className.test('^empty','i')) { 
					varie[0].dispose();
					return 0;
				} 
			}
			return 1;
		} 	
		return 0;
	}
	
	function restoreEmpty(dest) {

		var uls = dest.getElements('ul');
		if(uls!=null && uls.length>0) {
			for(var u=0;u<uls.length;u++)
				restoreEmpty(uls[u]);
		}
		var varie = dest.getElements('li');
		if(varie.length==0) {
			var eto = new Element('li').addClass('empty item').set('html','vuoto');
			eto.inject(dest);
			return;
		}
	
	}
	
	function delLista(elem, lista) {
		//nuova versione con testo:
		var elSel = document.getElementById(lista);
		if(elSel==null) return;
		var valori = eval(elSel.value);
		var removeI = -1;
		for(var i = 0;i<valori.length;i++) {
			if(valori[i]==elem.valore) {
				removeI=i;break;
			}
		}
		if(removeI!=-1) {
			var salvame ="";
			for(var i = 0;i<valori.length;i++) {
				if(i!=removeI) {
					salvame+="\'" + valori[i] + "\',"; //+
				}
			}
			if(salvame.substring(salvame.length-1)==',')
				salvame = salvame.substring(0,salvame.length-1);
			elSel.value = "[" + salvame + "]";		
		} else
			return;
		elSel=null;
	}
	function insLista(elem, lista) {
		var elSel = document.getElementById(lista);
		if(elSel==null) return;
		var valori;
		if(elSel.value)
			valori = eval(elSel.value);
		else
			valori = [];
		var removeI = -1;

		for(var i = 0;i<valori.length;i++) {
			if(valori[i]==elem.valore) {
				removeI=i;break;
			}
		}
		if(removeI!=-1) return;
		//var nuovo = [elem.valore,elem.testo];
		valori.push(elem.valore);
		var salvame ="";
		for(var i = 0;i<valori.length;i++) {
			salvame+="\'" + valori[i] + "\',"; //+
		}
		if(salvame.substring(salvame.length-1)==',')
			salvame = salvame.substring(0,salvame.length-1);
		elSel.value = "[" + salvame + "]";
		elSel=null;		
	}

	function getElementoForm(ancora) {
		if(ancora ==null) return null;
		if(ancora.length==0) return null;
		if(ancora[0]==null) return null;
		var testo = ancora[0].innerHTML;
		var valori = ancora[0].title.split(',');
		if(valori ==null) return null;
		if(valori.length ==0 ) return null;
		if(valori.length!=3) return null;
		return { 'tipo': valori[0], 'valore':valori[1] +'#'+valori[2], 'testo':testo };
	}

	//codice per il dragdrop	
	function doItem(item,dest,isfinal,src) {

		item.addEvent('mousedown', function(e) {
			e = new Event(e).stop();
			//clone per il drag and drop
			var clone = this.clone()
				.setStyles(this.getCoordinates()) // this returns an object with left/top/bottom/right, so its perfect
				.setStyles({'opacity': 0.7, 'position': 'absolute'})
				.addEvent('emptydrop', function() {
					$$(dest).removeEvents();				
					this.removeEvents();
					this.dispose();
				}).inject(document.body);
						
			//creo il dragg
//			container: $('gesModel'),
			
			var drag = clone.makeDraggable({
					droppables: $$(dest),
					
					onDrop: function (el, droppable) {
						if(!droppable) return;
//						alert('droppable. ' + droppable.getAttribute('id'));
//						if( droppable.getAttribute('id')==_testDiv )  //'valori'
						droppable.tween('background-color','#7389AE');
						var elementoA = getElementoForm(el.getElements('a') );							
						if(!elementoA) { alert('elemento A nullo'); return; } 						
						el.removeEvents();		
						el.dispose();	
						var cando = false;
						if(!isfinal)
							cando=true;
						else {
							if( canDrag(droppable,elementoA.tipo)==0) {
								if(elementoA.tipo.substring(0,1).test('^'+droppable.getAttribute('id').substring(0,1),'i') )
									cando=true;
							}
						}
						if(cando==true) {
							var destname = '';
							var mlista = '';
							var dlista = '';							
							var isSingle = false;
							//imposto tutte le prop della src/dest
							if( droppable.getAttribute('id')==_testDiv ) { //'valori'
								destname =_srcPro; //'#posizioni .dropme';
								if(elementoA.tipo.test('^p','i'))
									dlista=_contPro; //'pro_lista';
								else
									dlista=_contReg; //'reg_lista';								
								isSingle = true;
							} else {
								destname =_srcReg; //'#valori';
								isSingle = false;							
							}
							if(elementoA.tipo.test('^p','i')) {
								mlista = _contPro; //'pro_lista';
							} else {
								mlista = _contReg; //'reg_lista';
							}
							
							var newModule = item.clone();
							if( droppable.getAttribute('id') == _testDiv ) { //cerca il figlio con l'id tipo corrispondente.
								var sonFolder = droppable.getElements('ul'); // ('#' + elementoA.tipo) ) ;
								var pos = -1;
								for(var p = 0; p<sonFolder.length;p++) {
									if(sonFolder[p].getAttribute('id') == elementoA.tipo ) {
										pos = p;break;
									}
								}
								if(sonFolder !=null && sonFolder.length>0 && pos!=-1) { 
									newModule.inject(sonFolder[pos]);
								} else //non lo trovo comunque inserisco nei repository
									newModule.inject(droppable);							
							} else	{							
								var sonFolder = droppable.getElements('ul'); // ('#' + elementoA.tipo) ) ;
								var pos = -1;
								for(var p = 0; p<sonFolder.length;p++) {
									if(sonFolder[p].getAttribute('id') == elementoA.tipo ) {
										pos = p;break;
									}
								}
								if(sonFolder !=null && sonFolder.length>0 && pos!=-1) { 
									newModule.inject(sonFolder[pos]);
								} else //non lo trovo comunque inserisco nei repository
									newModule.inject(droppable);										
							}
							doItem(newModule,destname,isSingle,droppable);
							item.dispose();
							insLista(elementoA,mlista);	
							if(dlista!='')							
								delLista(elementoA,dlista);
							if(destname!=_srcReg) { //'#valori'
								//alert(_srcReg + " --" + destname);
								//if(src==null)
								//	src = $(posReg);
								restoreEmpty(src);
							}
						} else { alert('Impossibile Inserire l\'elemento, raggiunta capienza massima o oggetto non conforme.'); restoreEmpty(droppable); return; }						
						droppable.tween('background-color','#eeeeee');						
												
					},
					onEnter: function (el, droppable) {
						if(!droppable) return;
//						if( droppable.getAttribute('id')==_testDiv )  //'valori'
						droppable.tween('background-color','#7389AE');
						

					},
					onLeave: function (el, droppable) {
						if(droppable)
							droppable.tween('background-color','#eeeeee');
						el.removeEvents();		
						el.dispose();								
					}
					/*,
					onComplete: function() {
						clone.remove();
					}*/
				});
			drag.start(e); // start the event manual
			
			
			
			
			

			/*
			var clone = this.clone()
				.setStyles(this.getCoordinates()) // this returns an object with left/top/bottom/right, so its perfect
				.setStyles({'opacity': 0.7, 'position': 'absolute'})
				.addEvent('emptydrop', function() {
					$$(dest).removeEvents();				
					this.removeEvents();
					this.remove();
				}).inject(document.body);
			var elementoA =getElementoForm( item.getElements('a') );
			*/
		});	
		
	};
	
	//Prima Lettura :: '#valori .drag_profile'
	$$('#<%=valori.ClientID%> .drag_profile').each(function(item){
		doItem(item,_srcPro,true,$('<%=valori.ClientID %>'));
	});
	//Prima Lettura :: '#posizioni .drag_profile'
	$$('#<%=posizioni.ClientID%> .drag_profile').each(function(item){
		doItem(item,_srcReg,false,$('<%=posizioni.ClientID %>'));
	});	
});
</script>

</asp:content>